<template>
	<scroll-view scroll-y="true" @scrolltolower="scrolltolower" style="height:calc(100% - 120rpx)">
		<view class="cu-card custom-card-live grid col-2 padding-lr-xs">
			<block v-for="(item,index) of list" :key="index">
				<view class="content-list padding-lr-xs padding-bottom-sm" @click="showDetail(item)">
					<view class="content-item bg-white">
						<view class="img-box-bg">
							<image :src="item.img" mode="aspectFill" style="height:100%" />
						</view>
						<view class="bg-shadeTop custom padding-lr-sm padding-top padding-bottom-xl flex text-xs" v-if="type==='live'">
							<view>
								<text class="cuIcon cuIcon-all"/>
								<text class="margin-left-xs">
								直播中 {{item.play_num}}人观看
								</text>
							</view>
						</view>
						
						<view class="bg-shadeBottom custom padding-lr-sm padding-bottom padding-top-xl flex flex-direction justify-between">
							<view class="text-sm text-cut" style="min-width: 0;">{{item.title}}</view>
							<view class="flex justify-between align-center margin-top-sm text-xs">
								<view class="flex justify-start align-center">
									<image class="cu-avatar custom round margin-right-xs" :src="item.avatar"/>
									<view>{{item.nickname}}</view>
								</view>
								<view class="flex justify-start align-center">
									<view></view>
									<view class="margin-left-xs">{{item.views_count}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</block>
		</view>
		<view v-if="isEmpty" class="flex justify-center">
			<text class="text-red">暂无搜索结果</text>
		</view>
	</scroll-view>
</template>

<script>
	export default{
		props:{
			content:{
				type:String,
				default:""
			},
			//区分视频和直播
			type:{
				type:String,
				default:""
			}
		},
		data(){
			return {
				list:[],
				total:0,
				query:{
					page:1,
					size:10,
					key:""
				},
				isMore:false,
				isEmpty:false
			}
		},
	    methods:{
			async getSearchList(type) {
				if(!this.content.length){
					this.$h.toast('搜索内容不能为空')
					return 
				}
				this.query.key=this.content
				let api=this.type==='live'?this.$h.api.liveModel.getLiveList:this.$h.api.videoModel.getSearch
				if(this.type==="user_video"){
					this.$set(this.query,"type",2)
				}
				if(this.type==="admin_video"){
					this.$set(this.query,"type",1)
				}
				let {data}=await this.waitingLoading(api)(this.query)
				this.total=data.total
				this.isMore=data.data.length===10
				//如果是刷新
				if(type==="r"){
					this.list=[...data.data]
				}else{
					this.list=[...this.list,...data.data]
				}
				this.isEmpty=!this.list.length
			},
			showDetail(item) {
				if(this.type==="user_video"){
					this.$h.router.push({
						path: "/pages/video/videoDetail",
						params: {
							id:item.id
						}
					})
				}
				if(this.type==="admin_video"){
					this.$h.router.push({
						path: "/pages/video/adminVideo/videoDetail",
						params: {
							id:item.id
						}
					})
				}
				if(this.type==="live"){
					this.$h.router.push({
						path:"/pages/live/liveDetail",
						params:{
							id:item.id,
							room_id:item.room_id
						}
					})
				}
			},
			scrolltolower(){
				if(this.isMore){
					this.query.page++
					this.getSearchList()
				}
			},
		},
		watch:{
			content(newVal){
				this.content=newVal
			}
		}
	}
</script>

<style lang="scss" scoped>
	.cu-btn.custom-head {
		width: 500rpx;
		color: #38383A;
		font-size: 28rpx;
	}
	
	.cu-card {
		padding-top: 20rpx;
	
		.cu-item.custom-margin {
			margin: 20rpx;
			overflow: hidden;
		}
	}
	
	.content-list {
		height: 520rpx;
	
		.content-item {
			width: 100%;
			height: 100%;
			border-radius: 14rpx;
			overflow: hidden;
			position: relative;
	
			.cu-avatar.custom {
				width: 40rpx;
				height: 40rpx;
			}
		}
	}
	
	.cu-card.custom-card-short,
	.cu-card.custom-card-live {
		padding-top: 40rpx;
	}
</style>
